<form class="instance-actions" aria-label="{intl.switchOrLogOut}">
  {#if $loggedInInstancesInOrder.length > 1 && $currentInstance !== instanceName}
    <button class="primary"
            on:click="onSwitchToThisInstance(event)">
      {intl.switchTo}
    </button>
  {/if}
  <button on:click="onLogOut(event)">{intl.logOut}</button>
</form>
<style>
  .instance-actions {
    width: 100%;
    display: flex;
    justify-content: right;
    margin: 20px 0;
  }
  .instance-actions button {
    margin: 0 5px;
    flex-basis: 100%;
  }
</style>
<script>
  import { store } from '../../../_store/store.js'
  import { importShowTextConfirmationDialog } from '../../dialog/asyncDialogs/importShowTextConfirmationDialog.js'
  import { switchToInstance, logOutOfInstance } from '../../../_actions/instances.js'
  import { formatIntl } from '../../../_utils/formatIntl.js'

  export default {
    store: () => store,
    methods: {
      onSwitchToThisInstance (e) {
        e.preventDefault()
        const { instanceName } = this.get()
        switchToInstance(instanceName)
      },
      async onLogOut (e) {
        e.preventDefault()
        const { instanceName } = this.get()

        const showTextConfirmationDialog = await importShowTextConfirmationDialog()
        showTextConfirmationDialog({
          text: formatIntl('intl.logOutOfInstanceConfirm', { instance: instanceName })
        }).on('positive', () => {
          // TODO: dumb timing hack because the modal navigates back while we're trying to navigate forward
          setTimeout(() => {
            /* no await */logOutOfInstance(instanceName)
          }, 200)
        })
      }
    }
  }
</script>
